<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="main2"/>
    <g:set var="entityName" value="${message(code: 'lead.label', default: 'lead')}"/>
    <title>转换商机</title>
  </head>

<body>
<div class="main-body">
    <div class="page-wrapper">
        <div class="page-header">
            <div class="page-header-title">
                <h4>转换商机</h4>
            </div>

            <div class="page-header-breadcrumb">
                <ul class="breadcrumb-title">
                    <li class="breadcrumb-item">
                        <a href="/salesDashboard/index">
                            <i class="icofont icofont-home"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <g:link controller="lead" action="index">转换商机</g:link>
                    </li>
                    <li class="breadcrumb-item">转换商机</li>
                </ul>
            </div>
        </div>

        <div class="page-body">
            <g:if test="${flash.message}">
                <div class="message alert alert-info" role="status">${flash.message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                </div>
            </g:if>
            <g:hasErrors bean="${this.lead}">
                <ul class="errors" role="alert">
                    <g:eachError bean="${this.lead}" var="error">
                        <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>>
                            <g:message error="${error}"/></li></g:eachError>
                </ul>
            </g:hasErrors>

            <g:if test="${params.type == 'list'}">
            <div class="contactListDiv hide">
                <g:each in="${params?.contactName}">
                  <div class="contactNameText">${it}</div>
                </g:each>
                <g:each in="${params?.salutationName}">
                  <div class="salutationNameText">${it}</div>
                </g:each>
                <g:each in="${params?.cellphone}">
                  <div class="cellphoneText">${it}</div>
                </g:each>
                <g:each in="${params?.phone}">
                  <div class="phoneText">${it}</div>
                </g:each>
                <g:each in="${params?.title}">
                  <div class="titleText">${it}</div>
                </g:each>
                <g:each in="${params?.email}">
                  <div class="emailText">${it}</div>
                </g:each>
            </div>
            </g:if>

            <g:form resource="${this.lead}" action="changeToOpportunitySave" method="POST">

                <input type="hidden" name="enableTerritory" id="enableTerritory" value="${this.enableTerritory}"/>
                <input type="hidden" name="id" id="id" value="${this.lead.id}"/>

                <g:if test="${this.enableTerritory}">
                    <div class="card">
                        <div class="card-header">
                            <h5>销售区域</h5>

                            <div class="card-header-right">
                                <i class="icofont icofont-rounded-down"></i>
                            </div>
                        </div>

                        <div class="card-block">
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label is-required">销售区域</label>

                                <div class="col-md-3">
                                    <g:select class="form-control" name="territoryName" optionKey="name" optionValue="name" from="${com.next.Territory.findAllByActive(true)}" noSelection="${['': '请选择']}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </g:if>

                <div class="card">
                        <div class="card-header">
                            <h5>产品信息</h5>

                            <div class="card-header-right">
                                <i class="icofont icofont-rounded-down"></i>
                            </div>
                        </div>

                        <div class="card-block">
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label is-required">产品线</label>

                                <div class="col-md-3">
                                    <g:select class="form-control" name="productLine" id="productLine" optionKey="id" from="${com.next.ProductLine.list()}" noSelection="${['': '请选择']}" />
                                </div>

                                <label class="col-md-2 col-form-label is-required">产品</label>

                                <div class="col-md-3">
                                    <select id="product" name="product" class="form-control productName">
                                    </select>

                                </div>

                            </div>
                        </div>
                    </div>

                <div class="card">
                    <div class="card-header">
                        <h5>客户信息</h5>

                        <div class="card-header-right">
                            <i class="icofont icofont-rounded-down"></i>
                        </div>
                    </div>

                    <div class="card-block">
                        <g:if test="${this.lead?.account}">
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label is-required">客户</label>

                                <div class="col-md-3">
                                    <g:textField class="hidden" name="accountId" id="accountId" value="${this.lead?.account?.id}"/>
                                    <g:textField class="form-control" disabled="disabled" name="accountName" id="accountName" value="${this.lead?.account}"/>
                                </div>

                            </div>
                        </g:if>
                        <g:else>
                             <div class="form-group row">
                                <label class="col-md-2 col-form-label is-required">客户名称</label>

                                <div class="col-md-3">
                                    <g:textField class="form-control" name="accountName" id="accountName" value="${this.lead?.company}"/>
                                </div>
                                <label class="col-md-2 col-form-label is-required">客户类型</label>

                                <div class="col-md-3">
                                    <g:select class="form-control" name="accountType"
                                              id="accountType" optionKey="name" optionValue="name"
                                              from="${com.next.AccountType.list()}"
                                              noSelection="${['': '请选择']}"/>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">网站</label>

                                <div class="col-md-3">
                                    <g:field type="url" class="form-control" name="website" id="website" value="${this.lead?.website}"/>
                                </div>

                                <label class="col-md-2 col-form-label">上级机构</label>

                                <div class="col-md-3">
                                    <g:select class="form-control" name="parent" optionValue="account" optionKey="accountId" from="${com.next.AccountTeam.findAllByUser(this?.user)}" noSelection="${['': '请选择']}" />
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">行业</label>

                                <div class="col-md-3">
                                    <g:select class="form-control" name="industryName" id="industryName" optionValue="name"
                                              optionKey="name"
                                              from="${com.next.Industry.list()}" noSelection="${['': '请选择']}"
                                              value="${this.lead?.industry?.name}"/>
                                </div>

                                <label class="col-md-2 col-form-label">雇员数量</label>

                                <div class="col-md-3">
                                    <g:field type="number" class="form-control integer" name="numberOfEmployees" id="numberOfEmployees"
                                             value="${this.lead?.numberOfEmployees}"/>
                                </div>
                            </div>
                        </g:else>


                    </div>
                </div>

                <div class="card contactDiv">
                    <div class="card-header">
                        <h5>联系人信息</h5>

                        <div class="card-header-right">
                              <!-- <i class="icofont icofont-minus text-danger deleteContactDiv"></i> -->
                              <i class="ion-plus cloneContactDiv"></i>
                            <i class="icofont icofont-rounded-down"></i>
                        </div>
                    </div>

                    <div class="card-block">
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label is-required">联系人姓名</label>

                            <div class="col-md-3">
                                <g:textField class="form-control" required="required" name="contactName"
                                             value="${this.lead?.fullName}"/>
                            </div>

                            <label class="col-md-2 col-form-label">称谓</label>

                            <div class="col-md-3" id="salutationDiv">
                                <g:select class="form-control" name="salutationName" optionValue="name"
                                          optionKey="name" from="${com.next.Salutation.list()}" noSelection="${['': '请选择']}"
                                          value="${this.lead?.salutation?.name}"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-2 col-form-label is-required">手机</label>

                            <div class="col-md-3">
                                <g:textField class="form-control" required="required" name="cellphone" value="${this.lead?.cellphone}"/>
                            </div>

                            <label class="col-md-2 col-form-label">电话</label>

                            <div class="col-md-3">
                                <g:textField class="form-control" name="phone" value="${this.lead?.phone}"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">头衔</label>

                            <div class="col-md-3">
                                <g:textField class="form-control" name="title" value="${this.lead?.title}"/>
                            </div>

                            <label class="col-md-2 col-form-label">邮箱</label>

                            <div class="col-md-3">
                                <g:field type="email"  class="form-control" name="email" value="${this.lead?.email}"/>
                            </div>
                        </div>

                        <div class="form-group row submitDiv">
                            <div class="col-md-12">
                              <button type="submit" class="btn btn-info">保存</button>
                                <!-- <g:submitButton class="btn btn-info" name="update" value="保存"/> -->
                            </div>
                        </div>

                    </div>
                </div>
            </g:form>
        </div>
    </div>
</div>
<g:javascript>
        $(function () {
          var count = $(".contactNameText").length;
          if (count > 1)
          {
            var originalDiv = $(".contactDiv").first();
            var addContactDiv = originalDiv.find(".cloneContactDiv");
            addContactDiv.remove();
            var submitDiv = originalDiv.find(".submitDiv");
            submitDiv.remove();


            for (var i=1; i < count; i++)
            {
              var cloneDiv = originalDiv.clone(true, true);
              var deleteContactDiv = '<i class="icofont icofont-minus text-danger deleteContactDiv"></i>';
              cloneDiv.find(".icofont-rounded-down").before(deleteContactDiv);
              if (i == count-1)
              {
                var addContactDiv = '<i class="ion-plus cloneContactDiv"></i>';
                cloneDiv.find(".icofont-rounded-down").before(addContactDiv);
                var submitDiv = cloneDiv.find(".card-block");
                var content = '<div class="form-group row submitDiv"><div class="col-md-12"><button type="submit" class="btn btn-info">保存</button></div></div>'
                submitDiv.append(content);
              }

              var originalSalutation = originalDiv.find("#salutationName").html();
              var salutationDiv = cloneDiv.find("#salutationDiv");
              salutationDiv.html("");
              var option = '<select class="form-control" name="salutationName" value="" id="salutationName">';
              option += originalSalutation;
              option += '</select>';
              salutationDiv.append(option)
              var tempText = $(".salutationNameText").eq(i).text();
              salutationDiv.find("option").each (function () {
                if (this.value == tempText)
                {
                  $(this).attr("selected", true);
                }
                else {
                  $(this).attr("selected", false);
                }
              });

              cloneDiv.find('[id]').each (
                function () {
                  if (this.id == "contactName")
                  {
                    this.value = $(".contactNameText").eq(i).text();
                  }
                  if (this.id == "salutationName")
                  {
                    this.value = $(".salutationNameText").eq(i).text();
                  }
                  if (this.id == "cellphone")
                  {
                    this.value = $(".cellphoneText").eq(i).text();
                  }
                  if (this.id == "phone")
                  {
                    this.value = $(".phoneText").eq(i).text();
                  }
                  if (this.id == "title")
                  {
                    this.value = $(".titleText").eq(i).text();
                  }
                  if (this.id == "email")
                  {
                    this.value = $(".emailText").eq(i).text();
                  }
                }
              );
              originalDiv.after(cloneDiv);
            }
          }


             function getProducts() {
                $.ajax({
                    type: "POST",
                    url: "/opportunity/getProducts",
                    data: {
                        productLine: $("#productLine").val(),
                    },

                    success: function (data) {
                        var productList = data.productList;
                        var option;
                        if (data.status == "success") {
                            $('.productName').html("");
                            $(".productName").append('<option value="">请选择</option>')
                            for (var i = 0; i < productList.length; i++) {
                                option = '<option value="' + productList[i][0] + '">' + productList[i][1] + '</option>';
                                $(".productName").append(option)
                            }
                            $("select").select2();
                        }
                    },
                    error: function () {
                        swal("获取失败，请稍后重试", "", "error");
                    }
                });
            }

            getProducts();
            // 动态产品
            $("#productLine").change(function () {
                getProducts();
            });

            $(document).on("click", ".cloneContactDiv", function () {
              var originalDiv = $(this).parents(".contactDiv");
              var deleteContactDiv = '<i class="icofont icofont-minus text-danger deleteContactDiv"></i>';
              var cloneDiv = originalDiv.clone(true, true);
              if (cloneDiv.find(".deleteContactDiv").length == 0)
              {
                cloneDiv.find(".cloneContactDiv").before(deleteContactDiv);
              }
              $(this).remove();
              var submitDiv = originalDiv.find(".submitDiv");
              submitDiv.remove();
              var originalSalutation = originalDiv.find("#salutationName").html();
              var salutationDiv = cloneDiv.find("#salutationDiv");
              salutationDiv.html("");
              var option = '<select class="form-control" name="salutationName" value="" id="salutationName">';
              option += originalSalutation;
              option += '</select>';
              salutationDiv.append(option)
              salutationDiv.find("option").attr("selected", false);
              cloneDiv.find('[id]').each (
                function () {
                  this.value = "";
                }
              );
              originalDiv.after(cloneDiv);
              if ($(".contactDiv").length == 5)
              {
                cloneDiv.find(".cloneContactDiv").remove();
              }
            });

          $(document).on("click", ".deleteContactDiv", function () {
            var currentContactDiv = $(this).parents(".contactDiv");
            var prevContactDiv = currentContactDiv.prev(".contactDiv");
            var submitDiv = prevContactDiv.find(".card-block");
            var content = '<div class="form-group row submitDiv"><div class="col-md-12"><button type="submit" class="btn btn-info">保存</button></div></div>'
            submitDiv.append(content);
            var toolDiv = prevContactDiv.find(".icofont-rounded-down");
            var addContactDiv = '<i class="ion-plus cloneContactDiv"></i>'
            toolDiv.before(addContactDiv);
            currentContactDiv.remove();
          });

        })
    </g:javascript>

</body>
</html>
